{% extends "base.html" %}

{% block title %}修改密码{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="glass-card mb-4 p-3">
        <h1 class="h3 mb-0 page-title-glass">
            <i class="fas fa-key mr-2"></i>修改密码
        </h1>
    </div>

    <!-- 修改密码表单 -->
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="glass-card card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">修改密码</h6>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="form-group">
                            <label for="current_password">当前密码</label>
                            <input type="password" class="form-control" id="current_password" name="current_password" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="new_password">新密码</label>
                            <input type="password" class="form-control" id="new_password" name="new_password" required>
                            <small class="form-text text-muted">密码长度不能少于6位</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="confirm_password">确认新密码</label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i>修改密码
                            </button>
                            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left mr-1"></i>返回
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* 液态玻璃风格补充 */
.glass-card {
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.10) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.glass-card .card-header, .glass-card .card-body {
    background: transparent !important;
}
[data-theme="dark"] .glass-card {
    background: rgba(30,30,30,0.7) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* 液态玻璃风格补充 */
.page-title-glass {
    color: #222 !important;
    transition: color 0.2s;
}
[data-theme="dark"] .page-title-glass {
    color: #fff !important;
}
</style>
{% endblock %} 